收尾|详情_前端如何下载文件流

篇首语：本文由编程笔记#小编为大家整理，主要介绍了前端如何下载文件流相关的知识，希望对你有一定的参考价值。

前言

如果后台返回的是文件地址&＃xff0c;那么前端直接通过 window.location.href 加文件地址&＃xff0c;就可以下载文件&＃xff1b;

但是如果后台返回的是文件流&＃xff0c;那么前端就需要做一些处理&＃xff1b;

其实前端处理的核心&＃xff1a;就是将文件流转为文件&＃xff0c;然后再模拟点击&＃xff0c;实现前者的效果。

步骤

1. 封装一个下载工具

这个工具的作用就是&＃xff0c;将获取的文件流转为文件&＃xff0c;并模拟点击该文件&＃xff0c;实现下载

先贴代码&＃xff0c;download.js&＃xff08;可直接复制使用&＃xff09;

export const download &＃61; (res, type, filename) &＃61;>
// 创建blob对象&＃xff0c;解析流数据
const blob &＃61; new Blob([res],
// 设置返回的文件类型
// type: &＃39;application/pdf;charset&＃61;UTF-8&＃39; 表示下载文档为pdf&＃xff0c;如果是word则设置为msword&＃xff0c;excel为excel
type: type
)
// 这里就是创建一个a标签&＃xff0c;等下用来模拟点击事件
const a &＃61; document.createElement(&＃39;a&＃39;)
// 兼容webkix浏览器&＃xff0c;处理webkit浏览器中href自动添加blob前缀&＃xff0c;默认在浏览器打开而不是下载
const URL &＃61; window.URL || window.webkitURL
// 根据解析后的blob对象创建URL 对象
const herf &＃61; URL.createObjectURL(blob)
// 下载链接
a.href &＃61; herf
// 下载文件名,如果后端没有返回&＃xff0c;可以自己写a.download &＃61; &＃39;文件.pdf&＃39;
a.download &＃61; filename
document.body.appendChild(a)
// 点击a标签&＃xff0c;进行下载
a.click()
// 收尾工作&＃xff0c;在内存中移除URL 对象
document.body.removeChild(a)
window.URL.revokeObjectURL(herf)


上面代码的重点是Blob对象&＃xff0c;详情可参考&＃xff1a;MDN文档&＃xff1a;Blob对象

2. 获取文件流

这里就是调用后台接口&＃xff0c;获取文件流

后台方法&＃xff1a;

&＃64;GetMapping(value &＃61; "/download-file")
public byte[] downloadFile(String contractNo)
log.info("&＃61;&＃61;&＃61; 下载合同文件 &＃61;&＃61;&＃61;");
byte[] bytes &＃61; service.downloadContract(Dict.create().set("contractNo", contractNo));
return bytes;



前端获取文件流的方法&＃xff1a;

import download from &＃39;&＃64;/utils/download&＃39;
import axios from &＃39;&＃64;/utils/request&＃39;
async downloadFile (contractNo)
const res &＃61; await axios.get(this.downloadContractFilePath &＃43; contractNo,
// 设置返回数据类型&＃xff0c;这里我设置的是"arraybuffer";如果不设置则下载下来的pdf会是空白
responseType: &＃39;arraybuffer&＃39;
)
// 调用封装好的下载函数
download(res, &＃39;application/pdf;charset&＃61;UTF-8&＃39;, moment().format(&＃39;YYYYMMDD&＃39;) &＃43; &＃39;.pdf&＃39;)


关于responseType可参考官网&＃xff1a;XMLHttpRequest.responseType - Web API 接口参考 | MDN (mozilla.org)

3. 点击标签a

最后我们创建一个标签a&＃xff0c;来点击下载文件

点击下载a>


总结